<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common::common(title='基础数据')">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
</head>
<script type="text/javascript" th:src="@{/js/mall/goods.js?v=}+${new java.util.Date().getTime()}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.config.js?v=20170409}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.all.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/third-party/zeroclipboard/ZeroClipboard.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.parse.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
<style>
.sku_container {
  margin-bottom: 30px;
  font-size: 12px;
  color: #666666;
  padding: 10px;
  border: 1px solid #e5e5e5;
}

.remove {
  display: none;
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 16px;
  color: white;
  text-align: center;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}

.sku_group {
  margin-bottom: 10px;
}
.sku_group:hover .spec_title .remove {
  display: block;
}

.spec_title {
  position: relative;
  padding: 7px 10px;
  background-color: #f8f8f8;
  line-height: 16px;
  font-weight: 400;
}
.spec_title .input {
  width: 200px;
}
.spec_title .remove {
  top: 12px;
  right: 10px;
}

.group_container {
  padding: 10px 10px 0;
}
.group_container .input {
  width: 250px;
}
.group_container .sku_item {
  background-color: #f8f8f8;
  padding: 10px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  text-align: center;
  position: relative;
  border-radius: 2px;
  cursor: pointer;
}
.group_container .sku_item:hover .remove {
  display: block;
}
.group_container .sku_item .remove {
  top: -8px;
  right: -8px;
}
.group_container .sku_item .text {
  display: block;
  width: 74px;
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
<body>
	<div th:replace="common/components/egrid"></div>
	<div th:replace="common/components/sku-table"></div>
	<div th:replace="common/components/sku-select"></div>
<div id="app" v-cloak>
  <input type="hidden" id="shopId" v-model="shopId" th:value="${shopId}" />
  <input type="hidden" id="shopName" v-model="shopName" th:value="${shopName}" />
  <el-container @keyup.enter.native="query">
	<el-header height="45px" class="inner_header">
	    	<el-form ref="form" :model="queryData" label-width="80px"  :label-position="labelPosition" >
		    	<el-row :gutter="20">
				  <el-col :span="5">
				  		<el-form-item label="商品名:">
					  		<el-input placeholder="请输入商品名" v-model="queryData.name" :size="size" clearable>
							</el-input>
						</el-form-item>
				  </el-col>
				  <el-col :span="5">
				  		<el-form-item label="上架状态:">
					  		<el-select v-model="queryData.publishStatus" :size="size"  placeholder="请选择 ">
						    <el-option
						      v-for="item in [{value:0,label:'未上架'},{value:1,label:'已上架'}]"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
						</el-form-item>
				  </el-col>
				  <el-col :span="5">
				  	<el-form-item label-width="0">
				  		<el-button type="primary" :size="size" icon="el-icon-search" @click="search">查询</el-button>
				  		<el-button type="primary" :size="size" icon="el-icon-plus" @click="addItem">增加</el-button>
				  	</el-form-item>
				  </el-col>
				</el-row>
	    	</el-form>
	    </el-header>
	    <el-main class="inner_main">
	    	<div>
	    	  <el-table  
	    	    ref="goodsDatagrid" 
	    	    :data="datagrid"
			    tooltip-effect="dark"
			    style="width: 100%;"
			    :height="tableHeight"
			    @row-click="datagridSelect"
			    v-loading="queryIng"
			    border
			    highlight-current-row
			    stripe
			    >
			    	<el-table-column type="index" label="序号" width="50"  align="center" header-align="center"></el-table-column>
				    <el-table-column prop="shopName" label="店铺名" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="name" label="商品名" width="150" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="code" label="商品编码" width="150" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="classifyName" label="分类名" width="100" align="center" header-align="center"> </el-table-column>
				    <el-table-column prop="publishStatus" label="上架状态" width="100" align="center" header-align="center">
				    	<template slot-scope="scope">
							{{ scope.row.publishStatus=='0'?'未上架':'已上架'}}				    	
				    	</template>
				    </el-table-column>
				    <el-table-column  label="操作" fixed="right"  align="center" header-align="center">
				    	<template slot-scope="scope">
					        <el-button type="primary" size="small"  @click="editItem(scope.row)">编辑</el-button>
					        <el-button type="danger" size="small"  @click="deleteItem(scope.row)">删除</el-button>
					    </template>
				    </el-table-column>
			  </el-table>
			</div>
			<div class="pagination_wrap">
			    <el-pagination
			      :current-page="queryData.page"
			      :page-sizes="[10, 20, 40, 100]"
			      :page-size="queryData.rows"
			      :layout="pagination_layout"
			      :total="totalNum"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      @prev-click="handlePrevClick"
			      @next-click="handleNextClick">
			    </el-pagination>
			 </div>
	    </el-main>
	</el-container>
	<!-- dialog 开始 不需要【删除】 -->
	<el-dialog :visible.sync="dialogConfig.dialogFormVisible" :top="10" :close-on-click-modal="false" :show-close="false" fullscreen="true">
		  <el-form :model="addData" ref="dialogForm" :rules="rules">
		  	<el-form-item label="商品名" prop="name" 
      		:label-width="dialogConfig.formLabelWidth">
			  	<el-input v-model="addData.name" :size="size"  auto-complete="off" style="width:220px;"></el-input>
		     </el-form-item>
		  	<el-form-item label="商品分类" prop="classifyName" 
      		:label-width="dialogConfig.formLabelWidth">
		     	<el-cascader :options="cascaderOptions"  :size="size" v-model="addData.classifyCode" :props="cascaderProps" @change="handleClassify" style="width:220px;"></el-cascader>
		     </el-form-item>
		  	<el-form-item label="商品上架" prop="publishStatus" 
      		:label-width="dialogConfig.formLabelWidth">
      			<el-switch
		          v-model="addData.publishStatus"
		          :active-value="'1'"
		          :inactive-value="'0'">
		        </el-switch>
		     </el-form-item>
		     <el-form-item label="运费方案" prop="freightId" 
      			:label-width="dialogConfig.formLabelWidth">
		     	<el-select v-model="addData.freightId" :size="size" @change="handleFreight"  placeholder="请选择 " style="width:220px;">
				    <el-option
				      v-for="item in freightOptions"
				      :key="item.id"
				      :label="item.name"
				      :value="item.id">
				    </el-option>
				  </el-select>
		     </el-form-item>
		  	<!-- <el-form-item label="市场价" prop="guidePrice" 
      		:label-width="dialogConfig.formLabelWidth">
      			<el-input-number v-model="addData.guidePrice" :precision="2" :step="0.1" :min="0"></el-input-number>
		     </el-form-item>
		  	<el-form-item label="销售价" prop="sellPrice" 
      		:label-width="dialogConfig.formLabelWidth">
      			<el-input-number v-model="addData.sellPrice" :precision="2" :step="0.1" :min="0"></el-input-number>
		     </el-form-item> -->
		    <el-form-item label="规格项目" prop="attrList" 
      		:label-width="dialogConfig.formLabelWidth"> 
			    <div class="sku_container">
					<div class="sku_group mb10" v-for="(spec, index) in specification" :key="spec.id">
						<div class="spec_title">
							<span class="label">规格名：</span>
							<el-input class="input" placeholder="请输入规格名" v-model.trim="spec.value"></el-input>
							<span class="remove" @click="delSepc(index)">&times;</span>
						</div>
						<div class="group_container">
							<span class="label">规格值：</span>
							<el-popover placement="bottom" width="120" trigger="click" v-for="(option, option_index) in spec.leaf" :key="option_index">
								<el-input v-model.trim="option.value" style="width: 110px;"></el-input>
								<div class="sku_item" slot="reference">
									<span class="remove" @click.stop="delOption(index, option_index)">&times;</span>
									<div class="text">
										{{option.value}}
									</div>
								</div>
							</el-popover>
							<el-input class="input" suffix-icon="el-icon-plus" v-model="addValues[index]" placeholder="多个产品属性以空格隔开"
							 @keyup.native.enter="addOption(index)" @blur="addOption(index)"></el-input>
						</div>
					</div>
					<div class="spec_title">
						<el-button type="info" :disabled="disabled" @click="addSpec">
							添加规格项目
						</el-button>
					</div>
				</div>
			</el-form-item>
			<el-form-item label="规格属性" prop="skuList"  :label-width="dialogConfig.formLabelWidth">
			    <div class="sku_container">
				    <skutable :skus-data="specificationFilter" ref="skutable"></skutable>
				</div> 
			</el-form-item>
			<el-form-item label="轮播图"  prop="imgList" :label-width="dialogConfig.formLabelWidth">
				<el-upload
				  :action="uploadUrl()"
				  list-type="picture-card"
				  :on-success="handleAvatarSuccess_memberHeadImage"
				  :before-upload="beforeAvatarUpload"
				  :on-remove="handleRemove"
				  :file-list="imgArray"
				  :size="size"
				  limit="5">
				  <i class="el-icon-plus"></i>
				</el-upload>
			</el-form-item>
	        <el-form-item label="商品详情" :label-width="dialogConfig.formLabelWidth">
      		  <script id="add_editor" type="text/plain" class="float-left" style=" height:400px;font-size: 14px; font-family: arial;"></script>
	        </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer" style="text-align: center;">
		    <el-button @click="closeDialog" size="small">取 消</el-button>
		    <el-button type="primary" @click="submitForm('dialogForm')" size="small">确 定</el-button>
		  </div>
	 </el-dialog>
	 <!-- dialog 结束 -->
	 
</div>
</body>
</html>